<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>LotusAdmin</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css" tppabs="css/style.css"/>
    <meta name="description" content="lotusadmin">

    <style>
        body {
            height: 100%;
            background: #16a085;
            overflow: hidden;
        }

        canvas {
            z-index: -1;
            position: absolute;
        }
    </style>
    <script src="/js/jquery-3.2.1.js"></script>
    <script src="/js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
    <script src="/js/Particleground.js" tppabs="js/Particleground.js"></script>

</head>
<body>
<dl class="admin_login">
    <dt>
        <strong>${sysProperties.name}</strong>
        <em>Management System</em>
    </dt>
    <dd class="user_icon">
        <input type="text" name="username" id='username' placeholder="账号" class="login_txtbx"/>
    </dd>
    <dd class="pwd_icon">
        <input type="password" name="password" id="password" placeholder="密码" class="login_txtbx"/>
    </dd>

    <dd class="val_icon">
        <div class="checkcode">
            <input type="text" name="username" id="J_codetext" placeholder="验证码" maxlength="4" class="login_txtbx">
            <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
        </div>
        <input type="button" value="验证码核验" class="ver_btn" onClick="validateCode();">
    </dd>
    <dd>
        <button id="bs" onclick="login()" type="button" value="立即登陆" class="submit_btn"/>
        登陆</button>
    </dd>
    <dd>
        <p>${sysProperties.copyright}</p>
        <p>浙备---</p>
    </dd>
</dl>
</body>
<script src="./layui/layui.js"></script>
<script>
    var layer;

    layui.use('layer', function()
    {
        layer = layui.layer;
        layer.msg('账号:admin  密码:123456');
    })
    $(document).ready(function () {
        //粒子背景特效
        $('body').particleground({
            dotColor: '#5cbdaa',
            lineColor: '#5cbdaa'
        });
        //验证码
        createCode();
    });


    function login() {
        var isValid = validateCode();
        if (!isValid)
        {
            layer.msg('请输入正确的验证码');
            return;
        }
        var username = $('#username').val();
        var password = $('#password').val();
        $.ajax({
            url: 'loginSubmit.do',
            type: 'post',
            dataType: 'json',
            data: {
                username: username,
                password: password,
                code: code
            },
        }).done(function (data) {
            console.log(data);
            if (data.code != 0) {
                layer.msg(data.msg, {});
                createCode();
            } else {
//                layer.msg('登录成功', {icon: 1,}, function () {
                    window.location.href = "/";
//                });

            }
        })
    }

    document.onkeydown = function (e) {
        var ev = document.all ? window.event : e;
        if (ev.keyCode == 13) {
            login();
        }
    }
</script>
</html>
